const {resolve} = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const optimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')

const CommonCssLoader = [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
        loader:"postcss-loader",
        options:{
            ident: 'postcss', //说明options里面插件的使用是针对于谁的，我们这里是针对于postcss的
            plugins:[ //这里的插件只是这对于postcss
                require('postcss-preset-env')() 
            ]
        }
    }
]
// 使用browerslist的哪一个环境
process.env.NODE_ENV = "production"

module.exports = {
    entry:"index.js",
    output:{
        filename:"bundle.js",
        path:resolve(__dirname,"build")
    },
    module:{
        rules:[
            //css提取单独文件 css-loader MiniCssExtractPlugin.loader
            {
                test:/\.css$/,
                use:[
                   ...CommonCssLoader
                ]
            },
            // less->css 并提取文件 less-loader
            {
                test:/\.less$/,
                use:[
                    ...CommonCssLoader,
                    "less-loader"
                ]
            },
            // js 语法检查  package.json中配置eslintConfig
            /**
             *  "eslintConfig": {
                    "extends": "airbnb-base"
                }
             */
            {
                test:/\.js$/,
                exclude:/node_modules/,
                enforce:"pre",
                use:[
                    {
                        loader:"eslint-loader",
                        options:{
                            fix:true
                        }
                    }
                ]
            },
            // js 兼容性检查 babel-loader, @babel/core @babel/preset-env, core-js3
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:[
                    {
                        loader:"babel-loader",
                        options:{
                            presets:[
                                [
                                    "@babel/preset-env",
                                    {
                                        useBuiltIns:"usage",
                                        corejs:{
                                            version:3
                                        },
                                        targets:{
                                            chrome:"60",
                                            firefox:"60",
                                            ie:"9"
                                        }
                                    }
                                ]
                            ]
                        }
                    }
                ]
            },
            //img 图片处理 url-loader
            {
                test:/\.(jpg|png|gif|jpeg)/,
                use:[
                    {
                        loader:"url-loader",
                        options:{
                            filename:"[hash].[ext]",
                            outputPah:"img",//输出路径
                            limit:20*1024,
                            esModule:false
                        }
                    }
                ]
            },
            //html 压缩处理
            {
                test:/\.html$/,
                use:[ "html-loader" ]  
            },
            //打包其他资源
            {
                exclude:/\.(gif|jpg|png|jpeg|js|css|less|html)$/,
                use:[
                    {
                        loader:"file-loader",
                        options:{
                            outputPath:"media"
                        }
                    }
                ]
            }

        ]
    },
    plugins:[ 
        //css压缩  optimize-css-assets-webpack-plugin
        new optimizeCssAssetsWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename:"css/build.css",
        }),
        //编译html
        new HtmlWebpackPlugin({
            filename:"index.html",
            template:"./src/index.html",
            minify:{
                collapseWhitespace:true,
                removeComments:true
            }
        })

    ],
    mode:"production"//表示生成环境 自动压缩js
}